<template>
    <div class="progress">
        <el-row :gutter="10">
            <el-col :span="8" v-for="(item, index) of progressList" :key="index">
                <el-card>
                    <div class="progress-title">{{ item.title }}</div>
                    <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="item.percentage"
                    :status="item.percentage < 51 ? 'exception' : item.percentage > 50 && item.percentage < 80 ? 'warning' : 'success'"
                    />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { getCheckRatioData } from '@/api/bigData/storeInspection.js';
import { toRaw } from 'vue'

const progressList = ref(
    [
        {
            title: '有问题检查项占比',
            percentage: 0
        }, {
            title: '整改率',
            percentage: 0
        }, {
            title: '整改完成率',
            percentage: 0
        }, 
    ]
)

defineExpose({getData})

function getData(data) {
    let url = `/intelligent/store/getCheckRatioData?serviceId=${toRaw(data).serviceId}&shopId=${toRaw(data).shopId}&startDateTime=${toRaw(data).startDateTime}&endDateTime=${toRaw(data).endDateTime}`
    getCheckRatioData(url).then(res=>{
        progressList.value = [
            {
                title: '有问题检查项占比',
                percentage: Number((res.data.problemRatio * 100).toFixed(0))
            }, {
                title: '整改率',
                percentage: Number((res.data.changeRation * 100).toFixed(0))
            }, {
                title: '整改完成率',
                percentage: Number((res.data.finishRation * 100).toFixed(0))
            }, 
        ]
    })
}
</script>
<style lang="scss" scoped>
.progress{
    .progress-title {
        font-weight: bold;
        line-height: 50px;
    }
}
</style>